<template>
	<div>

		<div class="ud-app-loader ud-component--header-v6--header udlite-header" data-module-id="common/udlite/desktop" data-module-args="{&quot;isInstructorSignupEnabled&quot;:false,&quot;isLoggedIn&quot;:false,&quot;tryUFBPlacements&quot;:{&quot;bar&quot;:&quot;ufb_header&quot;,&quot;profile&quot;:&quot;account-menu&quot;,&quot;mobile&quot;:&quot;ufb_header&quot;},&quot;mobileAppLink&quot;:{&quot;url&quot;:&quot;/mobile/&quot;},&quot;searchPhrase&quot;:null}" data-module-priority="-10"><div data-unique-id="339" style="display:none"></div>

<div class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv" data-purpose="header"><div class="skip-to-content-button--skip-to-content--1MoIi"><button type="button" class="udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md skip-to-content-button--skip-to-content-btn--3Uakj"><span aria-hidden="true" class="skip-to-content-button--skip-to-content-shadow--eBW6V"></span><span style="margin:0">跳转至目录</span></button></div><a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod"><img src="../assets/static/picture/logo-coral.svg" alt="Udemy" width="110" height="32" /></a><nav class="header--gap-button--3bIww popper--popper--19faV popper--popper-hover--4YJ5J">
    <span class="udlite-text-sm header--dropdown-button-text--2jtIM">类别</span>
</nav>


<div class="udlite-search-form-autocomplete header--search-bar--1_mS0 udlite-form-group"><label class="udlite-sr-only udlite-form-label udlite-heading-sm" for="u339-search-form-autocomplete--3">搜索任何内容</label>

    <input placeholder="搜索任何内容" name="q" autoComplete="off" value="" id="u339-search-form-autocomplete--3" class="udlite-text-input udlite-text-input-small udlite-text-sm udlite-search-form-autocomplete-input js-header-search-field" /></div>


    <div v-if="username != ''">
    欢迎:{{ username }}  

   &nbsp; &nbsp;&nbsp;

   	<van-image round  width="5rem" height="5rem"  :src="imgsrc"  />

   &nbsp; &nbsp;&nbsp;

   <router-link to="/center">用户中心</router-link>

    <van-button type="primary" @click="logout">注销</van-button>

	<!-- 购物车 -->

	<van-badge :content="total">

			<div class="child"><a href="/cart" > 购物车 </a></div>



	</van-badge>
    

    </div>

    <div v-else>
    	
    	<router-link to="/login">登 录</router-link>

    	/

    	<router-link to="/reg">注 册</router-link>

    </div>



    <div style="flex:1"></div></div>

</div>
		


	</div>
</template>

<script type="text/javascript">


	export default{

		data(){

			return{

				username:""
			
				
			}

		},

		//接收父组件传递过来的变量
		props:['imgsrc','total'],

		//初始化
		mounted:function(){


			//赋值操作
			//取数据
			var uname = localStorage.getItem("username");

			//没登录
			if(uname==null){

				this.username = '';
			}else{
				//已登录
				this.username = uname;
			}
		

		},
		//自定义方法
		methods:{


			logout(){

				//删除用户信息
				localStorage.removeItem("username");
				localStorage.removeItem("id");

				this.$router.push("/login");

			}


		
		}


	};
	


</script>

<style type="text/css">

.child{

	width: 40px;
	height: 40px;
	background: #f2f3f5;
	border-radius: 4px;
}
	

</style>